<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/easyui.css">
	<link rel="stylesheet" href="css/icon.css">
	<link rel="stylesheet" href="css/demo.css">
	<script src='js/jquery.min.js'></script>
	<script src='js/jquery.easyui.min.js'></script>
</head>
<body>
	<div class='easyui-layout' data-options='fit:true'>
		<div data-options="region:'north'" style='height:50px'>
			<h2>小顾同学👨‍🎓</h2>
		</div>
		<div data-options="region:'south',split:true" style='height:50px'></div>
		<!-- <div data-options="region:'east',split:true" title='East' style='width:100px'></div> -->
		<div data-options="region:'west',split:true" title='West' style='width:100px'></div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<table class='easyui-datagrid' data-options="url:'http://192.168.31.141:8087/user',method:'get',border:false,singleSelect:true,fit:true,fit:true,fitColumns:true,rownumbers:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:10,toolbar:toolbar">
				<thead>
				<!-- {"id":53,"phone":"18602148038","sex":"男","age":"25","name":"路人丙","provnce":"上海市","city":"长宁区","districts":"长宁区","adress":"新泾六村"} -->
					<tr>
						<th data-options="field:'id',align:'center'" width='40'>ID</th>
						<th data-options="field:'phone',align:'center'" width='80'>Phone</th>
						<th data-options="field:'sex',align:'center'" width='50'>Sex</th>
						<th data-options="field:'age',align:'center'" width="50">Age</th>
						<th data-options="field:'name',align:'center'" width='80'>Name</th>
						<th data-options="field:'provnce',align:'center'" width="60" >Provnce</th>
						<th data-options="field:'city',align:'center'" width='60'>City</th>
						<th data-options="field:'districts',align:'center'" width='80'>Districts</th>
						<th data-options="field:'adress',align:'center'" width='100'>Adress</th>
					</tr>
				</thead>
			</table>	
		</div>
	</div>
	<script>
        (function($){
            function pagerFilter(data){
                if ($.isArray(data)){    // is array
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var target = this;
                var dg = $(target);
                var state = dg.data('datagrid');
                var opts = dg.datagrid('options');
                if (!state.allRows){
                    state.allRows = (data.rows);
                }
                if (!opts.remoteSort && opts.sortName){
                    var names = opts.sortName.split(',');
                    var orders = opts.sortOrder.split(',');
                    state.allRows.sort(function(r1,r2){
                        var r = 0;
                        for(var i=0; i<names.length; i++){
                            var sn = names[i];
                            var so = orders[i];
                            var col = $(target).datagrid('getColumnOption', sn);
                            var sortFunc = col.sorter || function(a,b){
                                return a==b ? 0 : (a>b?1:-1);
                            };
                            r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
                            if (r != 0){
                                return r;
                            }
                        }
                        return r;
                    });
                }
                var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = state.allRows.slice(start, end);
                return data;
            }
 
            var loadDataMethod = $.fn.datagrid.methods.loadData;
            var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
            $.extend($.fn.datagrid.methods, {
                clientPaging: function(jq){
                    return jq.each(function(){
                        var dg = $(this);
                        var state = dg.data('datagrid');
                        var opts = state.options;
                        opts.loadFilter = pagerFilter;
                        var onBeforeLoad = opts.onBeforeLoad;
                        opts.onBeforeLoad = function(param){
                            state.allRows = null;
                            return onBeforeLoad.call(this, param);
                        }
                        var pager = dg.datagrid('getPager');
                        pager.pagination({
                            onSelectPage:function(pageNum, pageSize){
                                opts.pageNumber = pageNum;
                                opts.pageSize = pageSize;
                                pager.pagination('refresh',{
                                    pageNumber:pageNum,
                                    pageSize:pageSize
                                });
                                dg.datagrid('loadData',state.allRows);
                            }
                        });
                        $(this).datagrid('loadData', state.data);
                        if (opts.url){
                            $(this).datagrid('reload');
                        }
                    });
                },
                loadData: function(jq, data){
                    jq.each(function(){
                        $(this).data('datagrid').allRows = null;
                    });
                    return loadDataMethod.call($.fn.datagrid.methods, jq, data);
                },
                deleteRow: function(jq, index){
                    return jq.each(function(){
                        var row = $(this).datagrid('getRows')[index];
                        deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
                        var state = $(this).data('datagrid');
                        if (state.options.loadFilter == pagerFilter){
                            for(var i=0; i<state.allRows.length; i++){
                                if (state.allRows[i] == row){
                                    state.allRows.splice(i,1);
                                    break;
                                }
                            }
                            $(this).datagrid('loadData', state.allRows);
                        }
                    });
                },
                getAllRows: function(jq){
                    return jq.data('datagrid').allRows;
                }
            })
        })(jQuery);
 
        function getData(){
            var rows = [];
            for(var i=1; i<=800; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            return rows;
        }
        
        $(function(){
            $('#dg').datagrid({data:getData()}).datagrid('clientPaging');
        });

        var toolbar = [{
            text:'Add',
            iconCls:'icon-add',
            handler:function(){alert('add')}
        },{
            text:'Cut',
            iconCls:'icon-cut',
            handler:function(){alert('cut')}
        },'-',{
            text:'Save',
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }];
    </script>
</body>
</html>